<template>
  <div class="head">
		<div class="head-left">
			<span class="iconfont">&#xe624;</span>
		</div>
		<div class="head-input">
			<span>请输入要搜索的内容</span>
		</div>
		<div class="head-right">
      <router-link :to="{name: 'City'}">
				{{this.$store.state.city}}
				<span class="iconfont">&#xe62d;</span>
			</router-link>     
		</div>
	</div>
</template>
<script>
export default {
	name: 'homeHeader',
}
</script>
<style  scoped>
	.head {
		height: .86rem;
		background-color: #00bcd4;
		text-align: center;
		color: #fff;
		display: -webkit-flex;
    display: flex;
		align-items: center;
	}
	.head-left {
		width: .64rem
	}
	.head-input {
		background-color: #fff;
		color: black;
		text-align: left;
		flex: 1;
		height: .62rem;
		line-height: .62rem;
		margin-left: .2rem;
		border-radius: .1rem;
	}
	.head-right {
		min-width: 1.04rem;
    padding: 0 .1rem;
	}
	.head-right a {
		color: black;
	}
</style>

